<template>
  <div class="ke">
    <div class="powertop">
      <router-link class="powertopli " to="/yongjintixian/yongjintixian" v-if="checkquanxian('V0301').length > 0">佣金提现</router-link>
      <router-link class="powertopli powertopact" to="/yongjintixian/tixianjilu" v-if="checkquanxian('V0302').length > 0">提现记录</router-link>
      <router-link class="powertopli " to="/yongjintixian/mingxi" v-if="checkquanxian('V0303').length > 0">佣金明细核对</router-link>
    </div>

    <div v-loading='loading' style="padding: 20px;">
      <div class="kflexc">
        <div style="width: 250px; margin-right: 20px; margin-bottom: 20px;">
          <el-select clearable v-model="all.parent_name" style="width: 250px;" filterable placeholder="选择上游供应商">
            <el-option :label="item.name" :value="item.shop_id"  v-for="item in gongyingshanglists" :key="item.shop_id" ></el-option>
          </el-select>
        </div>
        <div style="width: 250px; margin-right: 20px; margin-bottom: 20px;">
          <el-select clearable v-model="all.status" style="width: 250px;" filterable placeholder="选择打款状态">
            <el-option label="全部" value="20,25,30,40,50" ></el-option>
            <el-option label="未打款" :value="20" ></el-option>
            <el-option label="已打款" :value="30" ></el-option>
          </el-select>
        </div>
        <div style="margin-right: 20px; margin-bottom: 20px;">
          提现时间:
          <el-date-picker  v-model="times" @change="timeschange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']" range-separator="至"  start-placeholder="开始日期"  end-placeholder="结束日期"></el-date-picker>
        </div>
        <el-button type="danger" round  style="margin-right: 20px; margin-bottom: 20px;" @click="search()">搜索</el-button>
      </div>

      <el-table :data="list" border style="width: 100%; margin: 20px 0;" ref="multipleTable">

        <el-table-column align='center' prop='apply_withdraw_at' label="提现时间"></el-table-column>
        <el-table-column align='center' prop='final_commission' label="提现金额"></el-table-column>
        <el-table-column align='center' prop='parent_name' label="供应商"></el-table-column>
        <el-table-column align='center' label="发票">
          <template slot-scope="scope">
            <el-button type="text" @click="chakanfapiao(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='invoice_info' label="发票类型"></el-table-column>
<!--        <el-table-column align='center' prop='invoice_type' label="发票类型">
          <template slot-scope="scope">
            <div v-if="scope.row.invoice_type == 0">无发票</div>
            <div v-if="scope.row.invoice_type == 1">电子发票</div>
            <div v-if="scope.row.invoice_type == 2">纸质发票</div>
          </template>
        </el-table-column> -->
        <el-table-column align='center' prop='tax_amount' label="增值税税额"></el-table-column>
        <el-table-column align='center' prop='withdraw_amount' label="到账金额"></el-table-column>
        <el-table-column align='center' prop='status_name' label="打款状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">未结算</div>
            <div v-if="scope.row.status == 10">待结算</div>
            <div v-if="scope.row.status == 20">待打款</div>
            <div v-if="scope.row.status == 25" style="color: #f00;">
               已驳回
               <el-tooltip class="item" effect="dark" :content="scope.row.refuse_reason" placement="top-start">
                 <i class="el-icon-warning" style="color: #f00; font-size: 22px;"></i>
               </el-tooltip>
            </div>
            <div v-if="scope.row.status == 30" style="color: green;">已打款</div>
            <div v-if="scope.row.status == 40" style="color: #f00;">
               打款失败
               <el-tooltip class="item" effect="dark" :content="scope.row.refuse_reason" placement="top-start">
                 <i class="el-icon-warning" style="color: #f00; font-size: 22px;"></i>
               </el-tooltip>
            </div>
            <div v-if="scope.row.status == 50">打款中</div>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='withdraw_at' label="打款时间">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 30">{{scope.row.withdraw_at}}</div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="操作">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.status == 30" @click="chakandakuan(scope.row)">查看打款信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination>
    </div>


    <el-dialog title="打款详情" :visible.sync="log5" width="820px" :close-on-click-modal="false" :close-on-press-escape="false">

      <div class="kflex">
        <div style=" margin-right: 20px; font-weight: bold;">支付方式</div>
        <div>
          <div style="color:rgb(0, 72, 250); margin-bottom: 20px;">
            {{all4.pay_way_name}}
          </div>
          <div style="color:rgb(166, 166, 166); margin-bottom: 20px;">支付金额：{{all4.withdraw_amount}}元 </div>
          <div style="color:rgb(166, 166, 166); margin-bottom: 20px;">支付时间：{{all4.withdraw_at}}</div>
          <div style="color:rgb(166, 166, 166); margin-bottom: 20px;">支付订单号：{{all4.payment_txn}}</div>
        </div>
      </div>
      <div class="kflex" style="margin-bottom: 20px;">
        <div style=" margin-right: 20px; font-weight: bold;">支付备注</div>
        <div>
          <div>{{all4.withdraw_remark}}</div>
        </div>
      </div>
      <div class="kflex"  style="margin-bottom: 20px;">
        <div style=" margin-right: 20px; font-weight: bold;">支付截图</div>
        <div>
          <!-- <div><img :src="all4.withdraw_pic" style="max-width: 100%;"></div> -->
          <!-- <div><img :src="all2.withdraw_pic" style="max-width: 100%;"></div> -->
          <div v-for="(item,index) in all4.withdraw_pics" :key="index" @click="dangqian = index">
            <img v-if="item" :src="item" style="max-width: 100%;">
          </div>
        </div>
      </div>

      <!-- <div style="margin-bottom: 20px; color: rgb(64, 66, 71); font-size: 14px;">{{all4.withdraw_at}}，打款完成</div>
      <div style="margin-bottom: 20px; color: rgb(64, 66, 71); font-size: 14px;" v-if="all4.collect_type == 2">打款支付宝账户：{{all4.ali_no}}</div>
      <div style="margin-bottom: 20px; color: rgb(64, 66, 71); font-size: 14px;" v-if="all4.collect_type == 2">转账备注：{{all4.withdraw_remark}}</div>
      <div style="margin-bottom: 20px; color: rgb(64, 66, 71); font-size: 14px;" v-if="all4.collect_type == 1">打款截图</div>
      <div class="flexcc" v-if="all4.collect_type == 1">
        <img :src="all4.withdraw_pic">
      </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button round @click="log5 = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="发票" :visible.sync="log6" width="820px" :close-on-click-modal="false" :close-on-press-escape="false">

      <div v-if="log6fapiao.invoice_way == 2" style="margin-bottom: 20px;">
        物流公司：{{log6fapiao.track_company}}
      </div>
      <div v-if="log6fapiao.invoice_way == 2">
        单号：{{log6fapiao.track_no}}
      </div>
      <div v-if="log6fapiao.invoice_way == 1">

        <a :href="item" target="_blank" style="color: rgb(0, 90, 255);  display: block; margin-bottom: 10px;" v-for="(item,index) in log6fapiao.invoice_imgs" :key="index">{{item}}</a>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button round @click="log6 = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: "ke",
    data() {
      return {
        times:[],
        loading:false,
        list:"",

        all:{
          end:"",
          parent_name:"",
          status:"20,25,30,40,50",
          start:"",
          page:1,
          page_size:20,
          apply_withdraw_at_start:"",
          apply_withdraw_at_end:""
        },
        total:0,
        log:false,

        gongyingshanglists:"",
          log5:false,
          log6:false,
        all4:"",
        fapiao:"",
        log6fapiao:""
      }
    },
    created() {
      this.getlist()

      //获取供应商
      axios.get('/api/gth/supplier/list?page_size=2000')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.gongyingshanglists = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
    },
    mounted() {

    },
    methods: {

      chakanfapiao:function(item){
        this.log6fapiao = item
        this.log6 = true
      },
      timeschange(){
        if(this.times && this.times.length > 0){

          this.all.start = this.times[0]
          this.all.end = this.times[1]
        }else{
          this.all.start = ''
          this.all.end = ''
        }
      },
      chakandakuan:function(item){
        this.all4 = item
        this.log5 = true
      },
      search: function() {
        this.all.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        axios.get('/api/plan-market/income/pools',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ke {
    .unconfirmeds{

      color:red;
      font-weight: 700;
    }
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
